import { teamsLightTheme } from "fish-ui-yy";
import type {
  HorizontalSpacingTokens,
  VerticalSpacingTokens,
} from "fish-ui-yy";

const theme = teamsLightTheme;

const Horizental = () =>{
    const horizentalArr = Object.keys(theme).filter(
        (tokenName)=> {
           return tokenName.startsWith("spacingHorizontal")
        }
    ) as (keyof HorizontalSpacingTokens)[]
    return (
        <div style={{
            display:"grid",
            gridTemplateColumns:"auto auto 1fr",
            gap:"10px",
            alignItems:"center"
        }}>
           {
            horizentalArr.map((item)=>[
                <div key={item}>{item}</div>,
                <div key={`${item}-value`}>{theme[item]}</div>,
                <div key={`${item}-demo`} style={{
                    width:theme[item],
                    height:"2em",
                    backgroundColor:"#bbb"
                }}></div>
            ])
            
           }
        </div>
    )
}

const Vertical = () =>{
    const verticalArr = Object.keys(theme).filter(
        (tokenName)=> {
           return tokenName.startsWith("spacingVertical")
        }
    ) as (keyof HorizontalSpacingTokens)[]
    return (
        <div style={{
            display:"grid",
            gridTemplateColumns:"auto auto 1fr",
            gap:"10px",
            alignItems:"center"
        }}>
           {
            verticalArr.map((item)=>[
                <div key={item}>{item}</div>,
                <div key={`${item}-value`}>{theme[item]}</div>,
                <div key={`${item}-demo`} style={{
                    height:theme[item],
                    width:"20em",
                    backgroundColor:"#bbb"
                }}></div>
            ])
            
           }
        </div>
    )
}

export const Demo = () =>(
    <>
    <h2>Vertical</h2>
    <Vertical />
    <h2>Horizontal</h2>
    <Horizental />
  </>
)


export default {
    title: "theme/Spacing",
    parameters: {
        docs: {
        canvas: {
            sourceState: "none",
            withToolbar: false,
        },
        },
    },
};